<!--
 * @Author: lxw
 * @Date: 2021-02-22 14:15:15
 * @Description: 妹纸详情页
 -->
<template>
  <div>
    <v-img
      v-if="girlData.images"
      class="align-end rounded"
      :src="girlData.images[0]"
      height="148"
      gradient="rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)"
    >
      <v-card-title>妹纸图{{ girlData.title }}</v-card-title>
      <p>
        {{ girlData.author }} 发布于{{ girlData.publishedAt | fromNow }}
        <span><v-icon class="ml-5 mr-1" size="14">mdi-eye-outline</v-icon>{{ girlData.views }}</span>
        <span><v-icon class="ml-5 mr-1" size="14">mdi-comment-outline</v-icon>{{ comments.length }}</span>
        <span><v-icon class="ml-5 mr-1" size="14">mdi-heart-outline</v-icon>{{ girlData.likeCounts }}</span>
      </p>
    </v-img>

    <v-card class="mt-8 rounded pa-5 pt-10">
      <blockquote class="details__blockquote">
        <p class="grey--text">{{ girlData.desc }}</p>
      </blockquote>
      <v-img v-for="(item, index) of girlData.images" :key="index" :src="item" />
    </v-card>

    <v-card-title>
      评论<span class="grey--text text-truncate">({{ comments.length }})</span>
    </v-card-title>
    <v-card class="rounded">
      <v-list>
        <v-list-item v-for="item of comments" :key="item._id">
          <v-list-item-avatar>
            <v-img :src="item.headUrl" />
          </v-list-item-avatar>

          <v-list-item-content>
            <v-list-item-title>{{ item.userName }}</v-list-item-title>
            <v-list-item-subtitle v-if="item.parentId" class="mt-2">
              回复 <span class="text--primary">@{{ item.secondParentName }}</span> {{ item.comment }}
            </v-list-item-subtitle>
            <v-list-item-subtitle v-else class="mt-2">{{ item.comment }}</v-list-item-subtitle>
            <span class="mt-1 grey--text text-caption">{{ item.createdAt | fromNow }}</span>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </div>
</template>

<script>
export default {
  name: 'GirlDetails',
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      girlData: {},
      comments: []
    }
  },
  watch: {
    id: {
      immediate: true,
      handler () {
        this.getData()
        this.getComments()
      }
    }
  },
  methods: {
    async getData () {
      const { data } = await this.$apis.queryGirlDetails(this.id)
      this.girlData = data
    },
    async getComments () {
      const { data } = await this.$apis.listComments(this.id)
      this.comments = data.map(cur => JSON.parse(cur))
      // const list = []
      // for (let i = 0; i < data.length; i++) {
      //   const item = JSON.parse(data[i])
      //
      //   if (item.parentId) {
      //     const parentChildren = list[i - 1].children
      //     if (parentChildren) {
      //       parentChildren.push(item)
      //     } else {
      //       list[i - 1].children = [item]
      //     }
      //   } else {
      //     list.push(item)
      //   }
      // }
      //
      // this.comments = list.reverse()
    }
  }
}
</script>

<style scoped lang="scss">
.details {
  &__blockquote {
    position: relative;
    padding: 0 0 0 80px;
    margin: 40px 0;
    border: 0;
    background: transparent;

    &::before {
      content: "\201C";
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 80px;
      height: 60px;
      font-size: 70px;
      line-height: 60px;
      color: #BFBFBF;
      font-family: sans-serif;
      text-align: center;
      z-index: 1;
    }

    p {
      padding: 15px 5px 15px 5px;
    }
  }
}
</style>
